
<template>
  <div v-if="checkPermission(['admin'])" class="app-container">
    <el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-row style="padding-top: 20px">
            <div>
              <el-col :span="18">
                <Form ref="topSearchForm" :model="searchParams" inline>
                  <FormItem label="">
                    <span class="form-font">搜索:</span>
                    <Input v-model="searchParams.search" clearable placeholder="请输入Service名称" style="width: 200px" suffix-icon="el-icon-search" type="text" />
                  </FormItem>
                  <!-- <FormItem label="">
                    <span class="form-font">类型:</span>
                    <el-select v-model="searchParams.serviceType" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in serviceTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
                    </el-select>
                  </FormItem> -->
                  <FormItem label="">
                    <span class="form-font">环境:</span>
                    <el-select v-model="searchParams.env" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in envChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
                    </el-select>
                  </FormItem>
                  <FormItem label="">
                    <span class="form-font">区域:</span>
                    <el-select v-model="searchParams.zone" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in zoneChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
                    </el-select>
                  </FormItem>
                </Form>
              </el-col>
              <el-col align="right" :span="6">
                <a @click="addService"> <i class="el-icon-circle-plus"></i>&nbsp;&nbsp;添加Service </a>
              </el-col>
            </div>
          </el-row>
          <page-table
            height="200"
            :columns="serviceColumns"
            :data="serviceDatas.data"
            :loading="serviceLoading"
            :max-height="serviceMaxHeight"
            :pagination="servicePagination"
            border
            size="small"
            stripe
            @on-change="onTableChange"
          ></page-table>
        </el-col>
      </el-row>
    </el-row>
    <service-action
      v-if="showServiceActionModal"
      :action="action"
      :service-action-modal="showServiceActionModal"
      :service-info="serviceInfo"
      @on-service-change="setServiceActionModal"
    >
    </service-action>
    <service-delete :delete-modal="showServiceDeleteModal" :service-info="serviceInfo" @on-service-delete="setDeleteModal"> </service-delete>
  </div>
</template>

<script>
import PageTable from '@/components/PageTable/PageTable'
import { getCmdbServiceListByPage } from '@/api/cmdb/service'
import { serviceColumns } from '@/views/cmdb/service/config'
import { serviceTypeChoice, envChoice, zoneChoice } from '@/views/cmdb/config'
import { getParams } from '@/libs/table'
import { snakeCaseObject } from '@/libs/object'
import checkPermission from '@/utils/permission'
import ServiceAction from '@/views/cmdb/service/components/ServiceAction'
import ServiceDelete from '@/views/cmdb/service/components/ServiceDelete'
export default {
  name: 'Service',
  components: { PageTable, ServiceAction, ServiceDelete },
  data() {
    return {
      servicesList: [],
      sorter: {},
      pageSize: 15,
      pageNum: 1,
      serviceLoading: false,
      serviceMaxHeight: 700,
      serviceTypeChoice: [],
      serviceInfo: {},
      serviceColumns: [],
      serviceDatas: [],
      zoneChoice: [],
      envChoice: [],
      searchParams: {
        search: '',
        serviceType: '',
        zone: '',
        env: ''
      },
      action: {
        title: '创建',
        type: 'create'
      },
      showServiceDeleteModal: false,
      showServiceLogDrawer: false,
      showServiceActionModal: false
    }
  },
  computed: {
    servicePagination() {
      const { total, pageNum: current, pageSize } = this.serviceDatas
      return {
        total,
        current,
        pageSize
      }
    },
    requestParams() {
      const params = getParams(this)
      if (this.searchParams.search) {
        params['search'] = this.searchParams.search
      }
      if (this.searchParams.serviceType) {
        params['serviceType'] = this.searchParams.serviceType
      }
      if (this.searchParams.env) {
        params['env'] = this.searchParams.env
      }
      if (this.searchParams.zone) {
        params['zone'] = this.searchParams.zone
      }
      return params
    }
  },
  watch: {
    requestParams() {
      this.debouncedGetServiceData()
    },
    searchParams: {
      handler(newName, oldName) {
        this.pageNum = 1
      },
      deep: true
    }
  },
  created() {
    this.debouncedGetServiceData = this.$lodash.debounce(this.getCmdbServiceListByPage, 500)
  },
  mounted() {
    this.searchParams.serviceType = this.$route.path.split('/middle/')[1]
    this.serviceColumns = serviceColumns(this)
    this.serviceTypeChoice = serviceTypeChoice(this)
    this.zoneChoice = zoneChoice(this)
    this.envChoice = envChoice(this)
    this.debouncedGetServiceData()
  },
  methods: {
    checkPermission,
    // setInitModelInfo() {
    //   this.searchParams = {
    //     name: '',
    //     search: '',
    //     type: ''
    //   }
    // },
    onTableChange(pagination, filters, sorter) {
      const { current: pageNum, pageSize } = pagination
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.sorter = sorter
    },
    addService() {
      this.action = {
        title: '创建',
        type: 'create'
      }
      // this.setInitModelInfo()
      this.showServiceActionModal = true
    },
    setConfirmServiceModal(val) {
      this.showConfirmServiceModal = val['status']
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'delete')) {
        this.getServicePageList()
      }
    },
    setDeleteModal(val) {
      console.log(val)
      this.showServiceDeleteModal = val['status']
      if (!val['status'] && val['type'] === 'delete') {
        this.debouncedGetServiceData()
      }
    },
    setServiceActionModal(val) {
      console.log(val)
      this.showServiceActionModal = val['status']
      if (val['status']) {
        this.serviceInfo = {}
        this.action = {
          title: '创建',
          type: 'create'
        }
      }
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'create')) {
        this.getCmdbServiceListByPage()
      }
    },
    async getCmdbServiceListByPage() {
      this.serviceLoading = true
      const { data } = await getCmdbServiceListByPage(snakeCaseObject(this.requestParams))
      this.serviceDatas = data
      this.serviceLoading = false
    }
  }
}
</script>

<style>
.form-font {
  color: #515a6e;
  line-height: 32px;
  font-size: 13px;
  padding-right: 10px;
}
</style>
